<template>
  <div class="google-auth">
    <div class="show-pwd">
      <div class="show-pwd-title">Secret</div>
      <el-input style="padding: 0 30%; width: 40%" v-model="secret" placeholder="Secret"></el-input>
      <div class="show-pwd-title">验证码</div>
      <div class="show-pwd-code">{{ code }}</div>
    </div>
    <div class="gen-button">
      <el-button size="medium" type="primary" @click="gen">生 成</el-button>
    </div>
  </div>
</template>
<script>
import G from './gauth.js'
export default {
  name: 'GoogleAuth',
  data() {
    return {
      code: '-------',
      secret: '2CTBAHHLKJGAORQT',
    }
  },
  created() {},
  methods: {
    gen() {
      this.code = G.generate(this.secret)
    },
  },
}
</script>

<style lang="scss" scope>
.google-auth {
  // background: #bbb;
  height: 380px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.show-pwd {
  display: flex;
  flex-direction: column;
}
.show-pwd-title {
  padding: 20px 0;
  font-size: 26px;
}
.show-pwd-code {
  padding: 0 0 20px 0;
  font-size: 36px;
  font-weight: bold;
}
</style>
